import React, { Component } from 'react';
import TheTable from "../../../components/TheTable";
import TheButton from "../../../components/TheButton";
import { apiInviteActivityPage, apiInviteActivityFinish, apiInviteActivityDelete } from '@/request/distribution/pullActivityList'
import TheImage from "../../../components/TheImage";
import TheQueryForm from "../../../components/TheQueryForm";
import ThePagination from "../../../components/ThePagination";

class AboutUs extends Component {
  queryFormRef = React.createRef();
  state = {
    loading: false,
    dataSource: null,
    form_show: true,
    pageData: {
      pageNo: 1,
      pageSize: 10,
    },
    total: 0,
    searchOption: [
      {
        field: 'activityName',
        label: '活动名称',
        placeholder: '输入活动名称',
        required: false,
        rules: [],
        type: 'Input',
        defaultValue: ''
      },
      {
        field: 'activityStatus',
        label: '活动状态',
        placeholder: '全部',
        required: false,
        rules: [],
        type: 'Select',
        options: [{ value: "", label: '全部' }, { value: 0, label: '未开始' }, { value: 1, label: '进行中' }, { value: 2, label: '已结束' }],
      },
    ],
    columns: [
      {
        title: 'ID',
        dataIndex: 'inviteActivityId',
        key: 'inviteActivityId',
      },
      {
        title: '活动名称',
        dataIndex: 'activityName',
        key: 'activityName',
      },
      {
        title: '活动banner',
        dataIndex: 'activityBanner',
        key: 'activityBanner',
        render: (record) => {
          return <TheImage src={record} width={80} height={80} />
        }
      },
      {
        title: '奖励类型',
        render: (_, record) => {
          let rewardType = '', rewardPathway = ''
          switch (record.rewardPathway) {
            case 'LADDER_CASH_REWARDS':
              rewardPathway = '阶梯现金奖励'
              break
            case 'NO_CAP_ON_CASH_REWARDS':
              rewardPathway = '上不封顶现金奖励'
              break
            default:
              rewardPathway = ''
          }
          switch (record.rewardType) {
            case 'CASH_BONUS':
              rewardType = '现金奖励'
              break
            default:
              rewardType = ''
          }
          return rewardType + '-' + rewardPathway
        }
      },
      {
        title: '活动时间',
        dataIndex: 'activityTime',
        key: 'activityTime',
        render: (_, record) => {
          return record.startTime + ' ~ ' + record.endTime
        }
      },
      {
        title: '活动状态',
        dataIndex: 'activityStatusStr',
        key: 'activityStatusStr',
      },
      {
        title: '操作',
        align: 'center',
        width: 200,
        render: record => {
          return (<>
            {
              record.activityStatus === 0 &&
              <>
                <TheButton haspermi={['set:about:update']} onClick={() => this.goEdit(record.inviteActivityId)}>编辑</TheButton>
                <TheButton haspermi={['distribution:pullActivityList:del']} onClick={() => this.delete(record.inviteActivityId)}>删除</TheButton>
              </>

            }
            <TheButton haspermi={['distribution:pullActivityList:view']} onClick={() => this.goDetail(record.inviteActivityId)}>查看</TheButton>
            {
              record.activityStatus === 1 &&
              <TheButton haspermi={['distribution:pullActivityList:end']} onClick={() => this.endActivity(record.inviteActivityId)}>提前结束</TheButton>
            }
          </>)
        }
      },
    ],
    queryForm: {},
    initialValues: null,
    dialogStatus: false,
    title: null,
    btnLoading: false,
    type: null
  }

  async componentDidMount() {
    await this.getData()
  }
  //查看
  goDetail(id) {
    this.props.history.push('/distribution/pullActivityList/detail/' + id)
  }
  goEdit(id) {
    this.props.history.push('/distribution/pullActivityList/edit/' + id)
  }
  goAdd() {
    this.props.history.push('/distribution/pullActivityList/add/0')
  }
  delete = async (id) => {
    let res = await apiInviteActivityDelete([{ inviteActivityId: id }])
    if (res.code === 0) {
      React.$message({
        type: 'success',
        content: '删除成功'
      })
      this.getData()
      return false
    }
  }
  endActivity = (inviteActivityId) => {
    React.$confirm({
      title: "结束活动",
      content: "确认提前结束活动吗？操作不可逆",
      onOk: async () => {
        let res = await apiInviteActivityFinish({ inviteActivityId })
        if (res.code === 0) {
          React.$message({
            type: 'success',
            content: '操作成功'
          })
          this.getData()
          return false

        } else {
          React.$message({
            type: 'warning',
            content: res.codeMessage
          })
          return false
        }
      }
    });
  }

  getData = async (values) => {
    let { pageNo, pageSize } = this.state.pageData
    // console.log(this.state.queryForm)
    let res = await apiInviteActivityPage({
      size: pageSize,
      current: pageNo,
      ...this.state.queryForm,
    })
    if (res.code === 0 && res.data) {
      this.setState({
        dataSource: res.data,
        pageData: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        total: res.totalCount,
      })
    }
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      },
      // source: false
    }, () => {
      this.getData()
    })
  };
  onReset() {
    this.setState({
      queryForm: {}
    }, () => {
      this.pageChange(1, 10)
    })
  }
  onFormSearch(values) {
    this.setState({
      pageData: { pageNo: 1, pageSize: 10 },
      queryForm: { ...values }
    }, () => {
      this.getData()
    })
  }
  render() {
    const { loading, dataSource, columns, searchOption, pageData: { pageNo, pageSize }, total, form_show } = this.state
    return <div className={"p-layout-box configuration"}>
      <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption}
        onGetValues={(values) => this.onFormSearch(values)}
        onReset={(values) => this.onReset(values)}
      />
      <div>
        <TheButton haspermi={['distribution:pullActivityList:add']} size="middle" type="primary" onClick={() => this.goAdd()} >新增</TheButton>
      </div>
      <div className={"p-layout-content"}>
        <TheTable loading={loading} dataSource={dataSource} columns={columns} />
        <ThePagination
          pageNo={pageNo}
          pageSize={pageSize}
          total={total}
          pageChange={this.pageChange}
        />
      </div>
      {/* <TheDialog
                visible={dialogStatus}
                title={title}
                width={800}
                handleCancel={this.dialogCancel}
                footer={null}
            >
                <Editor btnLoading={btnLoading} data={initialValues} type={type} onFinish={this.onFinish}
                    dialogCancel={this.dialogCancel} />
            </TheDialog> */}
    </div>;
  }
}

export default AboutUs
